import React, { useEffect, useState } from "react";
import { LeafletMap, LeafletTileLayer } from "webgis-maps";
import "./index.scss";

/**
 * props: { viewItem?:DataNode,styles?: CSSProperties }
 * 地图可视化组件（最小集，功能可任意扩展）
 */
function MapView(props) {
  const { styles } = props;
  const [mapView, setMapView] = useState();
  useEffect(() => {
    /** 构建LeafletMap对象*/
    let leafletMap = new LeafletMap(
      "mapView",
      { zoomControl: false },
      10,
      [31.29, 120.65]
    );
    /** 添加自定义的缩放层级显示span功能，默认屏幕位置：topleft */
    leafletMap.addZoomLable();
    /** 添加自定义的缩放控件,默认屏幕位置：topleft */
    leafletMap.addZoomSlider(LeafletMap.POSITION_TOP_LEFT);
    /** 添加鼠标滑过动态显示经纬度span功能，默认屏幕位置：bottomright */
    leafletMap.addMousePosition();
    /** arcgis xyz服务类型的地址 */
    let url =
      "https://server.arcgisonline.com/arcgis/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}";
    /** 构建leaflet栅格瓦片图层对象 */
    let arcgisLayer = new LeafletTileLayer("arcgis", url);
    /** 将栅格瓦片图层添加到leafletMap中 */
    leafletMap.addLayer(arcgisLayer);
    setMapView(leafletMap.getMap());
    return () => {
      leafletMap && leafletMap.close();
    };
  }, []);
  return <div id="mapView" className="mapView" style={styles}></div>;
}

export default MapView;
